// 提供项目需要的工具函数，可以复用的逻辑封装这里

import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

/**
 * 数据懒加载函数
 * @param {function} apiFn 调用接口的函数
 */

export const useLazyData = (apiFn) => {
  const list = ref([])
    const target = ref(null)
    const { stop } = useIntersectionObserver(
      // 被观察的元素或组件
      target, 
      async ([{ isIntersecting }]) => {
      // 是否进入可视区
      // 如果在这里发请求，isIntersecting 值为真
      if (isIntersecting) {
        stop()
        const data = await apiFn()
        list.value = data.result
        // 如果第一次进入，发请求。停止观察
      }
    })
    // 提供给模板使用
    return { list, target }
}